<template>
  <div class="dia-file-body">
    <el-dialog
      width="50%"
      :title="$t('i18n.diaFile')"
      v-model="dialogFileUploadVisible"
      :before-close="handleClose"
    >
      <div class="file_up_main">
        <el-upload
          ref="upload"
          class="upload-demo"
          :show-file-list="false"
          :action="url"
          drag
          multiple
          :auto-upload="true"
          :headers="headers"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
        >
          <el-icon class="el-icon-upload">
            <upload-filled />
          </el-icon>
          <div class="el-upload__text">{{$t('i18n.file_Drop_tips')}}</div>
        </el-upload>
        <el-table
          class="el-up-table"
          :data="files"
          border
          stripe
          size="small"
          :loading="tableLoading"
          max-height="300"
        >
          <el-table-column prop="cnName" :label="$t('i18n.common_cnnname')">
            <template #default="scope">
              <el-button
                class="btn_text_hyperlink"
                :underline="false"
                @click="hyperlink(scope.row)"
              >{{ scope.row.cnName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="enName" :label="$t('i18n.common_ennname')"></el-table-column>
          <el-table-column prop="ext" :label="$t('i18n.common_ext')" align="center"></el-table-column>
          <el-table-column prop="dic_FileType" :label="$t('i18n.common_filetype')" align="center"></el-table-column>
          <el-table-column prop="size" :label="$t('i18n.common_filesize')" align="center"></el-table-column>
          <el-table-column prop="dic_Creator" :label="$t('i18n.common_filecreator')" align="center"></el-table-column>
          <el-table-column
            prop="dic_Creatdate"
            :label="$t('i18n.common_filecreatedate')"
            align="center"
          ></el-table-column>
          <el-table-column width="150" :label="$t('i18n.common_operation')" align="center">
            <template #default="scope">
              <el-button size="small" type="text">
                <a @click="downloadEvent(scope.row)">{{$t("i18n.co_download")}}</a>
              </el-button>
              <el-button
                size="small"
                type="text"
                @click="deleteHandle(scope.row.autoId)"
              >{{$t("i18n.co_del")}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            :size="'small'"
            type="danger"
            icon="el-icon-back"
            @click="handleClose"
          >{{ $t("table.Global_Cancel") }}</el-button>
          <el-button
            :size="'small'"
            type="primary"
            icon="el-icon-check"
            @click="confirm"
          >{{ $t("table.Global_Save") }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import reqVue from "../utils/req.vue";
import confVue from "../utils/conf.vue";
export default {
  emits: ["confirmEvent"],
  data() {
    return {
      dialogFileUploadVisible: false,
      files: [],
      ids: [],
      newids: [],
      deleteids: [],
      way: confVue.$docApi,
      tableLoading: false,
      headers: {
        Authorization: "Bearer " + window.localStorage.getItem("gloabl_token"),
        "api-version": 1.0,
        language: "zh-cn"
      },
      url: "",
      folderid: 0,
      isdocumentcenter: false,
      api: "file"
    };
  },
  components: {},
  methods: {
    ///初始化文件列表
    InitTable(paramters, folderid) {
      this.tableLoading = true;
      this.folderid = folderid ?? 0;
      this.url =
        confVue.$interfaceApi +
        this.way +
        "/" +
        this.api +
        "/v1.0/upload/" +
        (folderid ?? 0);
      if (paramters !== "" && paramters !== undefined && paramters !== null) {
        this.ids = paramters.split(",");
      }
      reqVue.$Post(this.ids, this.api + "/v1.0/getfiles", this.way).then(
        function(data) {
          if (data.status) {
            this.files = data.body;
            this.tableLoading = false;
          } else {
            this.tableLoading = false;
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    },
    ///上传成功时使用
    handleUploadSuccess(response) {
      if (!response.status) {
        this.tableLoading = false;
        this.$message.error(response.message);
      } else {
        this.ids.push(response.body.toString());
        this.newids.push(response.body.toString());
        this.InitTable(null, this.folderid);
      }
    },
    ///上传失败
    handleUploadError(response) {
      this.$message.error(JSON.parse(response.message).msg);
    },
    ////取消后删除文件
    handleClose() {
      reqVue.$Post(this.newids, this.api + "/v1.0/uploaddel", this.way).then(
        function(data) {
          if (!data.status) {
            this.tableLoading = false;
            this.$message.error(data.message);
          } else {
            this.ids = [];
            this.newids = [];
            this.deleteids = [];
            this.dialogFileUploadVisible = false;
          }
        }.bind(this)
      );
    },
    ///确定后保存文件
    confirm() {
      reqVue.$Post(this.deleteids, this.api + "/v1.0/uploaddel", this.way).then(
        function(data) {
          if (!data.status) {
            this.tableLoading = false;
            this.$message.error(data.message);
          } else {
            this.dialogFileUploadVisible = false;
            this.ids = [];
            this.newids = [];
            this.deleteids = [];
            let resu = "";
            this.files.forEach(element => {
              resu += element.autoId + ",";
            });
            this.$emit("confirmEvent", resu.trimEnd(","));
          }
        }.bind(this)
      );
    },
    ///删除
    deleteHandle(id) {
      this.deleteids.push(id + "");
      this.files.forEach(element => {
        if (element.autoId == id) {
          let index = this.files.indexOf(element);
          if (index !== -1) {
            this.files.splice(index, 1);
          }
        }
      });
    },
    //下载文件
    downloadEvent(item) {
      reqVue.$download({ autoid: item.autoId }, "download", item.cnName);
    },
    hyperlink(data) {
      if (data.fileType == 1 || data.fileType == 2 || data.fileType == 3)
        window.open(
          "/office/index.html?fileid=" + data.autoId + "&ctype=2&systemType=2"
        );
      else {
        window.open(data.fileUri);
      }
    }
  }
};
</script> 